import './resrt.css';
import './styles/bottom.scss'
//rcc 生成类组件
//rsf 生成函数式组件

import React, { Component } from 'react';

//导入组件
import Home from './components/Home';
import Allshop from './components/Allshop';
import Cate from './components/Cate';

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      index : 0 ,
      list:[
        { name : 'icon-shouye' , text : '首页' },
        { name : 'icon-fenlei' , text : '分类' },
        { name : 'icon-quanbu' , text : '全部商品' },
        { name : 'icon-gouwuche' , text : '购物车' },
        { name : 'icon-wode' , text : '个人中心' }
      ]
    }
  }

  clickChange(index){
    this.state.index = index
    this.setState({})
  }

  render() {
    return (
      <div className='app'>
        {/* <Home /> */}
        { 
          (() => {
            if( this.state.index == 0 ){
              return <Home />
            }
            else if( this.state.index == 1 ){
              return <Cate />
            }
            else if( this.state.index == 2 ){
              return <Allshop />
            }else{
              return <Home />
            }

          })()
         }
        <div className="zhanwei"></div>
        <div className="bottom">
            { this.state.list.map((item , index) => {
              return (
                <div className={'route ' + (this.state.index == index ? 'active' : '')} onClick={ () => { this.clickChange(index) } } key={index} >
                  <div className={'iconfont' + ' ' + item.name }></div>
                  <p>{item.text}</p>
                </div>
              )
            }) }
        </div>
      </div>
    );
  }    
}

export default App;